<template>
  <div class="company=page">
    <el-card class="box-card">

      <!-- 基础题库 -->

      <div slot="header" class="clearfix">
        <div class="title">说明：目前支持学科和关键字条件筛选</div>
        <el-button
          style="float: right"
          type="success"
          @click="$router.push('/questions/new')"
        >
          <i class="el-icon-edit"></i>新增试题</el-button
        >
      </div>
      <el-row :gutter="24">
        <el-form ref="form" :model="queryObj" label-width="80px">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                style="width: 200px"
                placeholder="请选择"
                v-model="queryObj.subjectID"
                filterable
                allow-create
              >
                <el-option label="111" value="111"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                style="width: 200px"
                placeholder="请选择"
                v-model="queryObj.catalogID"
                filterable
                allow-create
              >
                <el-option label="22" value="22"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                style="width: 200px"
                placeholder="请选择"
                v-model="queryObj.tags"
                filterable
                allow-create
              >
                <el-option label="好学" value="好学"></el-option>
                <el-option label="难学" value="难学"></el-option>
                <el-option label="还可以" value="还可以"></el-option>
                <el-option label="中等" value="中等"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><el-form-item label="关键字">
              <el-input
                style="width: 200px"
                v-model="queryObj.keyword"
                placeholder="根据题干搜索"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                style="width: 200px"
                placeholder="请选择"
                v-model="queryObj.questionType"
              >
                <el-option label="单选" value="1">单选</el-option>
                <el-option label="多选" value="2">多选</el-option>
                <el-option label="简答" value="3">简答</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                style="width: 200px"
                placeholder="请选择"
                v-model="queryObj.difficulty"
              >
                <el-option label="简单" value="1">简单</el-option>
                <el-option label="一般" value="2">一般</el-option>
                <el-option label="困难" value="3">困难</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select
                style="width: 200px"
                placeholder="请选择"
                v-model="queryObj.direction"
              >
                <el-option label="o2o" value="o2o"></el-option>
                <el-option label="外包服务" value="外包服务"></el-option>
                <el-option label="企业服务" value="企业服务"></el-option>
                <el-option label="互联网进入" value="互联网进入"></el-option>
                <el-option label="企业咨询" value="企业咨询"></el-option>
                <el-option label="互联网" value="互联网"></el-option>
                <el-option label="电子商务" value="电子商务"></el-option>
                <el-option label="外包服务" value="外包服务"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select
                style="width: 200px"
                placeholder="请选择"
                v-model="queryObj.creatorID"
                filterable
                allow-create
              >
                <el-option label="管理员" value="管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><el-form-item label="题目备注">
              <el-input
                v-model="queryObj.remarks"
                style="width: 200px"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="企业简称">
              <el-input
                v-model="queryObj.shortName"
                style="width: 200px"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <div>
              <el-row :gutter="12" type="flex">
                <el-col :span="6"
                  ><el-form-item label="城市">
                    <el-select
                      style="width: 120px"
                      placeholder="请选择"
                      v-model="queryObj.province"
                      @change="handleProvince"
                    >
                      <el-option
                        v-for="item in citySelect.province"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6"
                  ><el-form-item class="city">
                    <el-select
                      style="width: 120px"
                      placeholder="请选择"
                      v-model="queryObj.city"
                    >
                      <el-option
                        v-for="item in citySelect.cityDate"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select> </el-form-item
                ></el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6">
            <el-form-item style="float: right; margin-right: 30px">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="searchFn">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-alert
        :title="`共${total}条记`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="subjectID"
          label="学科"
          align="center"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="catalogID"
          label="目录"
          align="center"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          align="center"
          width="100px"
          :formatter="changeType"
        ></el-table-column>
        <el-table-column
          prop="question"
          label="题干"
          align="center"
          width="100px"
          :formatter="changeQuestion"
        ></el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          :formatter="formatDate"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          align="center"
          width="100px"
          :formatter="changedifficulty"
        >
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          align="center"
          width="120px"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <div class="actions" style="width: 200px">
              <el-button
                type="primary"
                icon="el-icon-view"
                circle
                plain
                @click="open('preview', row.id)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                circle
                plain
                @click="
                  $router.push({
                    path: '/questions/new',
                    query: { id: row.id, type: 'base' }
                  })
                "
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="del(row.id)"
              ></el-button>
              <el-tooltip
                class="item"
                effect="dark"
                content="加入精选"
                placement="top"
              >
                <el-button
                  type="warning"
                  icon="el-icon-check"
                  circle
                  plain
                  @click="joinChoice(row)"
                ></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryObj.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryObj.pageSize"
        layout="prev,pager,next,sizes,jumper"
        :total="this.total"
      >
      </el-pagination>
    </el-card>
    <QuestionsPreview
      ref="dialog"
      @newDataes="newDataes"
      @handleCloseModal="handleCloseModal"
      :formBase="formBase"
    ></QuestionsPreview>
  </div>
</template>

<script>
import {
  list,
  remove,
  detail,
  choiceAdd
} from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionsPreview from '../components/questions-preview'
export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      citySelect: {
        province: [],
        cityDate: []
      },
      flag: true,
      search: '',
      tableData: [],
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null
      },
      type: '',
      text: '',
      formBase: {
        id: '', // id
        number: '', // 试题编号
        subjectID: '', // 学科
        catalogID: '', // 目录
        questionType: '', // 题型
        difficulty: '', // 难度
        tags: '', // 标签
        direction: '', // 方向
        question: '', // 题干
        options: [],
        videoURL: '', // 视频解析
        answer: '', // 答案解析
        remarks: '' // 题目备注
      }
    }
  },
  async created () {
    this.initData()
    this.getCityData()
  },

  methods: {
    async initData () {
      const { data } = await list(this.queryObj)
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.initData()
    },
    handleCurrentChange (val) {
      this.queryObj.page = val
      this.initData()
    },
    changedifficulty (row, column) {
      // console.log(row[column.property])
      if (row[column.property] === '1') {
        return '简单'
      } else if (row[column.property] === '2') {
        return '一般'
      } else if (row[column.property] === '3') {
        return '困难'
      }
    },
    changeType (row, column) {
      if (row[column.property] === '1') {
        return '单选'
      } else if (row[column.property] === '2') {
        return '多选'
      } else if (row[column.property] === '3') {
        return '简答'
      }
    },
    changeQuestion (row, column) {
      return row[column.property].replace(/<[^>]+>/g, '')
    },
    formatDate (row, column) {
      return row[column.property].substring(0, 10)
    },
    async joinChoice (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          console.log(row)
          const data = { ...row, choiceState: 1 }
          const res = await choiceAdd(data)
          this.initData()
          console.log(res)
          this.$message({
            type: 'success',
            message: '加入精选成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入精选'
          })
        })
    },
    async del (id) {
      console.log(id)
      this.$confirm('删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          const obj = { id }
          const res = await remove(obj)
          this.initData()
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.formBase.city = this.citySelect.cityDate[0]
    },
    async open (type, id) {
      try {
        this.type = type
        this.$refs.dialog.dialogFormV()
        if (this.type === 'preview') {
          const { data } = await detail({ id })
          console.log(data)

          this.formBase.id = data.id
          this.formBase.questionType = data?.questionType
          this.formBase.difficulty = data.difficulty
          this.formBase.tags = data.tags
          this.formBase.subjectID = data.subjectID
          this.formBase.catalogID = data.catalogID
          this.formBase.direction = data.direction
          this.formBase.question = data.question.replace(/<[^>]+>/g, '')
          this.formBase.options = data.options
          this.formBase.videoURL = data.videoURL
          this.formBase.answer = data.answer.replace(/<[^>]+>/g, '')
          this.formBase.remarks = data.remarks
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleCloseModal () {
      this.$refs.dialog.dialogFormH()
    },

    newDataes (data) {
      // this.formBase = data
      this.initData()
      this.formBase.shortName = ''
      this.formBase.isFamous = false
      this.formBase.company = ''
      this.formBase.province = ''
      this.formBase.city = ''
      this.formBase.tags = ''
      this.formBase.remarks = ''
    },
    clear () {
      // this.initData()

      this.queryObj.subjectID = ''
      this.queryObj.catalogID = ''
      this.queryObj.tags = ''
      this.queryObj.keyword = ''
      this.queryObj.questionType = ''
      this.queryObj.difficulty = ''
      this.queryObj.direction = ''
      this.queryObj.creatorID = ''
      this.queryObj.remarks = ''
      this.queryObj.shortName = ''
      this.queryObj.province = ''
      this.queryObj.city = ''
    },
    searchFn () {
      this.initData()
      // this.clear()
    }
  },
  computed: {
    pageTitle () {
      if (this.type === 'add') return '创建用户'
      if (this.type === 'edit') return '编辑用户'
      else return 'add'
    }
  }
}
</script>

<style scoped lang="less">
.city {
  margin-left: 45px;
}
.title {
  color: #ffc0cb;
  font-size: 12px;
}
.box-card {
  margin: 20px;
}
// /deep/.el-input__inner {
//   width: 300px;
// }
/deep/.el-row {
  margin-bottom: 0px !important;
}
.el-form-item {
  text-align: left;
}
.el-pagination {
  margin-top: 30px;
  text-align: right;
}
/deep/.el-pagination__jump {
  margin-left: 0;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
